<template>
	<div class="addInvoices">
		<van-nav-bar :title="this.$route.params.type=='edit'?'修改发票':'添加发票'" left-text="返回" left-arrow @click-left="$router.go(-1)" />
		<br />
		<el-form :model="form" :rules="rules" ref="ruleForm">
			<el-form-item label="抬头" prop="taitou" v-show="!form.id">
				<el-autocomplete v-model="form.taitou" :fetch-suggestions="querySearch" :trigger-on-focus="false" placeholder="请输入发票抬头，必填项"
				 @select="handleSelect">
					<template slot-scope="{ item }">
						<div class="name">{{ item.taitou }}</div>
					</template>
				</el-autocomplete>
			</el-form-item>
			<el-form-item label="抬头" v-show="form.id" prop="taitou">
				<el-input v-model="form.taitou" autocomplete="off" placeholder="请输入抬头"></el-input>
			</el-form-item>
			<el-form-item label="税号" v-show="!form.id" prop="tariff_number">
				<el-autocomplete v-model="form.tariff_number" :fetch-suggestions="querySearchBytariff" :trigger-on-focus="false"
				 placeholder="请输入税号，必填项" @select="handleSelect">
					<template slot-scope="{ item }">
						<span class="addr">{{ item.tariff_number }}</span>
					</template>
				</el-autocomplete>
				<!-- <el-input v-model="form.tariff_number" autocomplete="off" placeholder="请输入18位税号，必填项"></el-input> -->
			</el-form-item>
			<el-form-item label="地址及电话">
				<el-input v-model="form.add_tel" autocomplete="off" placeholder="请输入地址及电话，非必填项"></el-input>
			</el-form-item>
			<el-form-item label="开户行及银行卡号">
				<el-input v-model="form.bank_card" autocomplete="off" placeholder="开户行及银行卡号，非必填项"></el-input>
			</el-form-item>
		</el-form>
		<center>
			<van-button color="linear-gradient(to right, #4bb0ff, #1989fa)" class="btn" @click="submitForm('ruleForm')">提交</van-button>
		</center>
	</div>
</template>

<script>
	export default {
		transition:'need',
		data() {
			return {
				changeType: this.$route.params.type,
				form: {},
				dialogTitle: "添加发票信息",
				rules: {
					taitou: [{
						required: true,
						message: "请输入发票抬头",
						trigger: "blur"
					}],
					tariff_number: [{
							required: true,
							message: "请输入税号",
							trigger: "blur"
						},
						{
							min: 18,
							max: 18,
							message: "18位税号",
							trigger: "blur"
						}
					]
				},
				restaurants: [], //发票抬头匹配
				restaurantsBytariff: [], // 税号匹配
			}
		},
		created() {
			let that = this;
			this.$axios
				.get("api/inv")
				.then(({
					data
				}) => {
					let obj = data.data;
					for (const i in obj) {
						obj[i].value = obj[i].taitou;
					}
					this.restaurants = obj;
				})
				.catch(err => {
					this.$toast(err);
				});
		},
		methods: {
			//将数据提交给后台(添加/修改)
			submitForm(formName) {
				//验证通过
				let that = this;
				this.$refs[formName].validate(valid => {
					if (valid) {
						if (this.changeType == 'edit') {
							console.log(this,this.changeType)
							//修改
							that.$axios
								.put(
									"api/consumer/" + that.form.id + "/updateInvoice", {
										invoice: that.form.id,
										taitou: that.form.taitou,
										add_tel: that.form.add_tel,
										bank_card: that.form.bank_card
									}
								)
								.then(res => {
									if (res.data.code == 200) {
										this.$toast.success("修改成功");
										this.$router.replace('/user/invoicesManagement')
									}
								})
								.catch(err => {
									this.$toast(err);
								});


						} else {
							//添加
							var user = that.$store.state.user;
							that.form.consumer_id = user.id;
							that.$axios
								.post("/api/consumer/addInvoice", that.form)
								.then(res => {
									if (res.data.code == 200) {
										that.$toast.success("添加成功");
										this.$router.replace('/user/invoicesManagement')
									} else {
										that.$toast(res.data.message);
									}
								})
						}
					} else {
						that.$toast({
							message:"信息填写错误，请重新输入",
							type:'fail'
						});
					}
				});
			},
			//输入抬头模糊匹配
			querySearch(queryString, cb) {
				var restaurants = this.restaurants;
				var results = [];
				if (restaurants.length > 0) {
					for (const i in restaurants) {
						restaurants[i].value = restaurants[i].taitou
					}
					results = results = queryString ?
						restaurants.filter(this.createFilter(queryString)) :
						restaurants;
				}
				// 调用 callback 返回建议列表的数据
				cb(results);
			},

			//税号模糊匹配
			querySearchBytariff(queryString, cb) {
				var restaurants = this.restaurants;
				var results = [];
				if (restaurants.length > 0) {
					//value改为税号
					for (const i in restaurants) {
						restaurants[i].value = restaurants[i].tariff_number
					}
					results = results = queryString ?
						restaurants.filter(this.createFilter(queryString)) :
						restaurants;
				}
				// 调用 callback 返回建议列表的数据
				cb(results);
			},

			//匹配
			createFilter(queryString) {
				return restaurant => {
					return (
						restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0
					);
				};
			},
			//模糊匹配赋值
			handleSelect(item) {
				var obj = {
					taitou: item.taitou,
					tariff_number: item.tariff_number,
					bank_card: item.bank_card,
					add_tel: item.add_tel
				};
				this.form = obj;
				this.$refs["ruleForm"].clearValidate();
			}
		}
	}
</script>

<style lang="less">
	.addInvoices {
		padding: 0 20px;
		background: white;
		height: 100%;
		box-sizing: border-box;
		margin: 0;
		.btn{
			margin-top: 100px;
			width: 90%;
		}
	}
</style>
